import React, {Component} from 'react';
import {View, Text, Image, StatusBar, TouchableOpacity, Modal} from "react-native";
import {ImageHeaderScrollView} from 'react-native-image-header-scroll-view';
import {Carousel} from 'teaset';
import {inject,observer} from 'mobx-react'
import {Toast} from 'teaset';

// 放大图片
import ImageViewer from 'react-native-image-zoom-viewer';

import {pxToDp} from "../../utils/styleKits";
import icon from "../../utils/icon";

import ThButton from "../../components/THButton";
import JMessage from "../../utils/JMessage";

@inject('RootStore')
@observer
class Index extends Component {
  timeId1 = 0;  // 轮播图
  // 轮播图数据
  carouselData = [
    {url: 'https://www.itying.com/images/flutter/slide01.jpg'},
    {url: 'https://www.itying.com/images/flutter/slide02.jpg'},
    {url: 'https://www.itying.com/images/flutter/slide03.jpg'},
  ];

  state = {
    // 列表数据
    listData: [
      {
        headUrl: 'https://www.itying.com/images/flutter/list1.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list1.jpg'},
          {url: 'https://www.itying.com/images/flutter/list2.jpg'},
        ]
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list3.jpg',
        content: `因嫌纱帽小，致使锁枷扛，昨怜破袄寒，今嫌紫蟒长。
          乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list3.jpg'},
          {url: 'https://www.itying.com/images/flutter/list4.jpg'},
        ]
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list5.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？
          昨日黄土陇头送白骨，今宵红灯帐底卧鸳鸯。
          金满箱，银满箱，转眼乞丐人皆谤。
          正叹他人命不长，那知自己归来丧！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list5.jpg'},
        ]
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list6.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？
          昨日黄土陇头送白骨，今宵红灯帐底卧鸳鸯。
          金满箱，银满箱，转眼乞丐人皆谤。
          正叹他人命不长，那知自己归来丧！
          训有方，保不定日后作强梁。择膏粱，谁承望流落在烟花巷！
          因嫌纱帽小，致使锁枷扛，昨怜破袄寒，今嫌紫蟒长。
          乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list6.jpg'},
          {url: 'https://www.itying.com/images/flutter/list7.jpg'},
          {url: 'https://www.itying.com/images/flutter/list8.jpg'},
        ]
      },
    ],

    visible: false,

    images:  [],  // 放大图片
    imagesIndex: 0,  //默认放大第几张图片
    loadingMsg: '正在加载中...'
  };

  componentDidMount(): void {
    // 清除定时器
    clearTimeout(this.timeId1);
  }

  render() {
    let {visible, images, imagesIndex, listData, loadingMsg} = this.state;
    return (
      <View style={{flex: 1}}>
        <StatusBar translucent backgroundColor={'transparent'}/>
        <ImageHeaderScrollView
          onScroll={this.scroll}
          maxHeight={pxToDp(220)}
          minHeight={pxToDp(40)}
          renderForeground={() => (
            <Carousel style={{height: pxToDp(220)}} control>
              {this.carouselData.map(item => {
                return <Image style={{width: '100%', height: pxToDp(220)}} resizeMode='cover'
                              source={{uri: item.url}}/>
              })}
            </Carousel>
          )}
        >
          <View>
            {/*个人信息*/}
            <View style={{
              padding: pxToDp(10), flexDirection: 'row', justifyContent: 'space-between',
              borderBottomColor: '#ddd', borderBottomWidth: pxToDp(5)
            }}>
              <View style={{justifyContent: 'space-between'}}>
                <Text>
                  一叶知秋
                  <Text style={{fontFamily: 'iconfont', color: '#ff422c'}}>{icon.icontanhuanv}</Text>
                  23岁
                </Text>
                <Text>单身 | 本科 | 年龄相仿</Text>
              </View>
              <View>
                <Text style={{
                  fontFamily: 'iconfont',
                  color: '#ff422c',
                  fontSize: pxToDp(40),
                  position: 'relative'
                }}>{icon.iconxihuan}</Text>
                <Text style={{position: 'absolute', left: pxToDp(15), top: pxToDp(12), color: '#fff'}}>50</Text>
                <Text style={{color: 'red'}}>缘分值</Text>
              </View>
            </View>


            {/*动态*/}
            <View style={{
              flexDirection: 'row', justifyContent: 'space-between', padding: pxToDp(10),
              borderBottomWidth: pxToDp(3), borderBottomColor: '#eee'
            }}>
              {/*动态数量*/}
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={{marginRight: pxToDp(5)}}>动态</Text>
                <View style={{
                  backgroundColor: 'red', width: pxToDp(24), height: pxToDp(24),
                  justifyContent: 'center', alignItems: 'center', borderRadius: pxToDp(20),
                }}>
                  <Text style={{color: '#fff'}}>{listData.length}</Text>
                </View>
              </View>

              {/*聊一下、喜欢*/}
              <View style={{flexDirection: 'row'}}>
                <ThButton style={{
                  height: pxToDp(40),
                  width: pxToDp(100),
                  borderRadius: pxToDp(25),
                  overflow: 'hidden',
                  marginRight: pxToDp(10)
                }}
                          onPress={()=>this.props.navigation.push('chat')}
                          textStyle={{fontSize: pxToDp(14)}}
                          startColor={'rgb(250, 173, 88)'}
                          endColor={'rgb(243, 135, 71)'}
                          icon={<Text style={{
                            fontFamily: 'iconfont',
                            color: '#fff',
                            marginRight: pxToDp(10)
                          }}>{icon.iconliaotian}</Text>}
                >聊一下</ThButton>

                <ThButton style={{height: pxToDp(40), width: pxToDp(100), borderRadius: pxToDp(25), overflow: 'hidden'}}
                          textStyle={{fontSize: pxToDp(14)}}
                          onPress={this.onLike}
                          icon={<Text style={{
                            fontFamily: 'iconfont',
                            color: '#fff',
                            marginRight: pxToDp(10)
                          }}>{icon["iconxihuan-o"]}</Text>}
                >喜欢</ThButton>
              </View>
            </View>

            <View>
              {
                listData.map((item, i) => {
                  return <View key={i} style={{
                    borderBottomColor: '#ddd', borderBottomWidth: pxToDp(1),
                    padding: pxToDp(10)
                  }}>
                    {/*个人信息*/}
                    <View style={{flexDirection: 'row'}}>
                      <Image source={{uri: item.headUrl}} style={{
                        width: pxToDp(50),
                        height: pxToDp(50), borderRadius: pxToDp(25), marginRight: pxToDp(10)
                      }}/>
                      <View style={{justifyContent: 'space-between'}}>
                        <Text style>
                          一叶知秋
                          <Text style={{fontFamily: 'iconfont', color: '#ff422c'}}>{icon.icontanhuanv}</Text>
                          23岁
                        </Text>
                        <Text>单身 | 本科 | 年龄相仿</Text>
                      </View>
                    </View>

                    {/*内容*/}
                    <Text numberOfLines={1} style={{marginTop: pxToDp(20), marginBottom: pxToDp(20)}}>
                      {item.content}
                    </Text>

                    <View style={{flexDirection: 'row'}}>
                      {
                        item.imgs.map((item2,ii) => {
                          return <TouchableOpacity key={ii} onPress={this.showModal.bind(this,i,ii)}>
                            <Image source={{uri: item2.url}} style={{
                              width: pxToDp(70), height: pxToDp(70),
                              marginRight: pxToDp(10)
                            }}/>
                          </TouchableOpacity>
                        })
                      }
                    </View>
                  </View>
                })
              }
              <Text style={{textAlign: 'center', margin: pxToDp(20)}}>{loadingMsg}</Text>
            </View>
          </View>
        </ImageHeaderScrollView>

        {/*放大图片*/}
        <Modal visible={visible} transparent={false} onRequestClose={()=>this.setState({visible: false})}>
          <ImageViewer imageUrls={images} index={imagesIndex} onClick={()=>this.setState({visible: false})}/>
        </Modal>
      </View>
    );
  }

  // 点击喜欢按钮
  onLike = async () => {
    const username = this.props.RootStore.userId;
    const text =  username + '222喜欢你';
    const extras = {11: JSON.stringify(22)};
    let res = await JMessage.sendTextMessage(username, text, extras);
    console.log(res);
    Toast.smile('喜欢成功');
  };

  // 放大图片
  showModal = (i, ii) => {
    let {listData} = this.state;
    let newList = listData[i].imgs;
    this.setState({
      visible: true,
      images: newList,
      imagesIndex: ii,
    })
  };

  // 滚动到底部，加载新数据
  scroll = ({nativeEvent})=> {
    // 1. `nativeEvent.contentSize.height`  列表内容的高度
    // 2. `nativeEvent.layoutMeasurement.height` 可视区域的高度
    // 3. `nativeEvent.contentOffset.y`  滚动条距离顶部的高度
    let {listData} = this.state;
    let newList = [
      {
        headUrl: 'https://www.itying.com/images/flutter/list7.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list7.jpg'},
          {url: 'https://www.itying.com/images/flutter/list8.jpg'},
        ]
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list9.jpg',
        content: `因嫌纱帽小，致使锁枷扛，昨怜破袄寒，今嫌紫蟒长。
          乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list9.jpg'},
        ]
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list10.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？
          昨日黄土陇头送白骨，今宵红灯帐底卧鸳鸯。
          金满箱，银满箱，转眼乞丐人皆谤。
          正叹他人命不长，那知自己归来丧！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list10.jpg'},
          {url: 'https://www.itying.com/images/flutter/list11.jpg'},
        ]
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list12.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？
          昨日黄土陇头送白骨，今宵红灯帐底卧鸳鸯。
          金满箱，银满箱，转眼乞丐人皆谤。
          正叹他人命不长，那知自己归来丧！
          训有方，保不定日后作强梁。择膏粱，谁承望流落在烟花巷！
          因嫌纱帽小，致使锁枷扛，昨怜破袄寒，今嫌紫蟒长。
          乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list12.jpg'},
          {url: 'https://www.itying.com/images/flutter/list1.jpg'},
          {url: 'https://www.itying.com/images/flutter/list2.jpg'},
        ]
      },
    ];
    let height = nativeEvent.contentSize.height - nativeEvent.layoutMeasurement.height - nativeEvent.contentOffset.y;

    this.setState({
      loadingMsg: '正在加载中...'
    });
    if (height < 10){
      this.timeId1 = setTimeout(()=>{
        this.setState({
          listData: [...listData, ...newList],
          loadingMsg: '数据加载完毕'
        })
      },1000)
    }

  }

}

export default Index;